<script setup>
import {ref, onMounted, h, computed, watch} from 'vue';
import {useRouter} from 'vue-router'
import GoodsItem from "@/components/GoodsItem.vue";
import SwiperVue from '@/views/home/components/Swiper.vue'
import Coupon from "@/components/Coupon.vue";
import Empty from "@/components/Empty.vue";
import {useUserStore, useCommStore} from '@/stores'
import {getCouponListApi, getGoodsListApi} from '@/api'
const shopId = computed(() => useCommStore().shopId)
const categoryId = computed(() => useCommStore().categoryId)
const categoryName = computed(() => useCommStore().categoryName)
const searchKeyword = computed(() => useCommStore().search)

const router = useRouter()
const searchForm = ref({
  sales: 1, // 销量1升序2降序
  evaluate: 1, // 评价1升序2降序
  price_min: 0,
  price_max: 5000,
  brand: '', // 品牌名称
  delivery: 1, // 交货期限1升序2降序
  available: 1, // 是否有货1有0无
})
const total = ref(0)
const page = ref(1)
const goodsList = ref([])
const couponList = ref([])
const pickSale = (sale) => {
  searchForm.value.sales = sale
  getGoodsList()
}
const pickEva = (eva) => {
  searchForm.value.evaluate = eva
  getGoodsList()
}
const pickDelivery = (delivery) => {
  searchForm.value.delivery = delivery
  getGoodsList()
}
const pickAvailable = (available) => {
  searchForm.value.available = available
  getGoodsList()
}
const brandSearch = () => {
  getGoodsList()
  searchForm.value.brand = ''
}
// 获取商品列表
const getGoodsList = () => {
  const { mem, token } = useUserStore()
  const params = {
    filters: {
      ...searchForm.value,
      category_id: categoryId.value,
      shop_id: shopId.value,
      search: searchKeyword.value,
    },
    mid: token ? mem.id : 0, // 用户id
  }
  getGoodsListApi(params).then((res) => {
    total.value = res.total
    goodsList.value = res.data
  })
}
const collect = (i) => {
  const val = goodsList.value[i].is_collection
  goodsList.value[i].is_collection = val === 0?1:0
}
// 获取优惠券列表
const getCouponList = () => {
  const { mem } = useUserStore()
  getCouponListApi({member_id: mem.id}).then(res => {
    couponList.value = res
  })
}
// 领取优惠券
const receiveSuccess = (i) => {
  couponList.value[i].my_coupon_status = 1
}
const nav = (name, type) => {
  router.push({ name, query: { type } })
}
// 监听店铺发生改变
watch(() => shopId.value, () => {
  getGoodsList()
})
// 监听选择分类是否发生改变
watch(() => categoryId.value, () => {
  getGoodsList()
})
// 监听搜索的内容发生改变
watch(() => searchKeyword.value, () => {
  getGoodsList()
  // const { setSearch } = useCommStore()
  // if (searchKeyword.value.bool) getGoodsList()
  // else setSearch('', true)
})
onMounted(() => {
  getGoodsList()
  getCouponList()
})
</script>

<template>
  <div class="home-page">
    <SwiperVue v-if="!categoryId"/>
    <div class="coupon-list" v-if="couponList.length">
      <Coupon
        type="receive"
        :coupon="cou"
        v-for="(cou, index) in couponList"
        :key="cou"
        @receiveSuccess="receiveSuccess(index)"
      />
      <a-button @click="nav('coupon', 'receive')" v-if="couponList.length !== 0"> 查看更多优惠券 </a-button>
    </div>
    <div class="cate-num" v-if="categoryId">
      <div class="cate"> {{ categoryName }} </div>
      <div class="num"> 共计 {{ total }} 件商品 </div>
    </div>
    <div class="filter-box" v-if="categoryId">
      <div class="filter-item">
        <div class="filter-name"> 销量 </div>
        <i class="fa-solid fa-angle-down"></i>
        <div class="filter-list">
          <div class="radio-box">
            <div class="radio" :class="searchForm.sales===1?'a-radio':''" @click="pickSale(1)"> 人气最高 </div>
            <div class="radio" :class="searchForm.sales===2?'a-radio':''" @click="pickSale(2)"> 人气最低 </div>
          </div>
        </div>
      </div>
      <div class="filter-item">
        <div class="filter-name"> 评价 </div>
        <i class="fa-solid fa-angle-down"></i>
        <div class="filter-list">
          <div class="radio-box">
            <div class="radio" :class="searchForm.evaluate===1?'a-radio':''" @click="pickEva(1)"> 评价最高 </div>
            <div class="radio" :class="searchForm.evaluate===2?'a-radio':''" @click="pickEva(2)"> 评价最低 </div>
          </div>
        </div>
      </div>
      <div class="filter-item">
        <div class="filter-name"> 交货期限 </div>
        <i class="fa-solid fa-angle-down"></i>
        <div class="filter-list">
          <div class="radio-box">
            <div class="radio" :class="searchForm.delivery===1?'a-radio':''" @click="pickDelivery(1)"> 最近交付 </div>
            <div class="radio" :class="searchForm.delivery===2?'a-radio':''" @click="pickDelivery(2)"> 最晚交付 </div>
          </div>
        </div>
      </div>
      <div class="filter-item">
        <div class="filter-name"> 是否有货 </div>
        <i class="fa-solid fa-angle-down"></i>
        <div class="filter-list">
          <div class="radio-box">
            <div class="radio" :class="searchForm.available===1?'a-radio':''" @click="pickAvailable(1)"> 商品充足 </div>
            <div class="radio" :class="searchForm.available===2?'a-radio':''" @click="pickAvailable(2)"> 商品缺货 </div>
          </div>
        </div>
      </div>
      <div class="filter-item">
        <div class="filter-name"> 价格区间 </div>
        <i class="fa-solid fa-angle-down"></i>
        <div class="filter-list">
          <div class="min-max">
            <a-input v-model:value="searchForm.price_min" type="number" @pressEnter="brandSearch" class="num-input" />
            <i class="fa-solid fa-minus"></i>
            <a-input v-model:value="searchForm.price_max" type="number" @pressEnter="brandSearch" class="num-input" />
          </div>
        </div>
      </div>
      <div class="filter-item">
        <div class="filter-name"> 品牌 </div>
        <i class="fa-solid fa-angle-down"></i>
        <div class="filter-list">
          <a-input v-model:value="searchForm.brand" placeholder="请输入品牌名称" @pressEnter="brandSearch" class="brand-input" />
        </div>
      </div>
    </div>
    <div class="goods-list" v-if="goodsList.length">
      <GoodsItem v-for="(it, index) in goodsList" :key="it.id" :info="it" @collect="collect(index)"/>
    </div>
    <Empty description="这里空荡荡的" v-else/>
  </div>
</template>

<style scoped>
.home-page {
  padding: 10px 0;
  :deep(.ant-breadcrumb-link) {
    color: #333 !important;
    font-size: 18px;
  }
  .coupon-list {
    padding: 10px;
    white-space: nowrap;
    overflow-x: auto;
    position: relative;
    .ant-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .cate-num {
    gap: 20px;
    display: flex;
    align-items: end;
    .cate {
      font-size: 25px;
      font-weight: bold;
    }
    .num {
      color: #999;
      font-size: 18px;
    }
  }
  .filter-box {
    gap: 16px;
    display: flex;
    margin-top: 20px;
    .filter-item {
      gap: 10px;
      display: flex;
      align-items: center;
      border-radius: 10px;
      background-color: #f1f1f5;
      position: relative;
      cursor: pointer;
      padding: 5px 10px;
      white-space: nowrap;
      .fa-solid {
        transition: all ease-in-out 0.3s;
      }
      &:hover .fa-solid {
        transform: rotate(180deg);
      }
      .filter-list {
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 999;
        transform: translateY(100%);
        display: none;
        padding: 10px;
        white-space: nowrap;
        border-radius: 10px;
        background-color: #fff;
        border: 1px solid #f1f1f5;
        .radio-box {
          .radio {
            line-height: 34px;
            padding-left: 25px;
            position: relative;
            &::before {
              display: block;
              content: "";
              width: 16px;
              height: 16px;
              border-radius: 50%;
              border: 1px solid #f1f1f5;
              position: absolute;
              left: 0;
              top: 50%;
              transform: translateY(-50%);
            }
            &.a-radio {
              &::before {
                border-color: var(--primary);
              }
              &::after {
                display: block;
                content: "";
                width: 12px;
                height: 12px;
                border-radius: 50%;
                background-color: var(--primary);
                position: absolute;
                left: 3px;
                top: 50%;
                transform: translateY(-50%);
              }
            }
          }
        }
        .min-max {
          gap: 5px;
          display: flex;
          align-items: center;
          .num-input {
            min-width: 100px;
            border-color: #999;
          }
        }
        .brand-input {
          min-width: 180px;
          border-color: #999;
        }
      }
      &:hover .filter-list {
        display: block;
      }
    }
  }

  .goods-list {
    margin-top: 20px;
  }
}

@media (max-width: 1300px) {
  .home-page {
    padding: 0;
  }
  .filter-box {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    .filter-item {
      justify-content: space-between;
      &:nth-last-of-type(1) {
        .filter-list {
          transform: translate(-20%, 100%);
        }
      }
    }
  }
}
</style>